<template>
  <div>
    <el-dialog
      title="样式配置"
      :append-to-body="true"
      :visible.sync="box"
      :modal-append-to-body="false"
      :modal="false"
      width="40%"
    >
      <el-form ref="form" label-width="100px">
        <el-form-item label="主题">
          <el-radio-group v-model="text" class="list">
            <el-radio-button
              v-for="(item, index) in list"
              :key="index"
              :label="item.value"
              >{{ item.name }}</el-radio-button
            >
            <!--  <el-row :span="24"> 
              <el-col v-for="(item,index) in list"
                      :key="index"
                      :md="4"
                      :xs="12"
                      :sm="4">
                <el-radio :label="item.value">{{item.name}}</el-radio>
              </el-col>
            </el-row> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="布局">
          <el-radio-group v-model="layout" class="list">
            <el-radio-button label="sidebar">纵向</el-radio-button>
            <el-radio-button label="navbar">横向</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="多标签">
          <el-radio-group v-model="openTabs" class="list">
            <el-radio-button :label="false">不开启</el-radio-button>
            <el-radio-button :label="true">开启</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="面包屑导航">
          <el-radio-group v-model="openBreadcrumb" class="list">
            <el-radio-button :label="false">不开启</el-radio-button>
            <el-radio-button :label="true">开启</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="导航位置" v-if="openBreadcrumb">
          <el-radio-group v-model="breadcrumbLayout" class="list">
            <el-radio-button label="header">顶部</el-radio-button>
            <el-radio-button label="content">内容</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="box = false">关闭</el-button>
        <el-button type="primary" @click="setTheme()" :disabled="isOnClick"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <span title="样式配置">
      <i class="el-icon-setting pointer" @click="open"></i>
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      box: false,
      text: "",
      isOnClick: false,
      list: [
        {
          name: "默认主题",
          value: "defaluttheme"
        },
        {
          name: "炫彩主题",
          value: "startheme"
        },
        {
          name: "渐变主题",
          value: "gradualstheme"
        }
      ],
      layout: "sidebar",
      openBreadcrumb: true,
      breadcrumbLayout: "header",
      openTabs: false
    };
  },
  computed: {
    // ...mapGetters(["themeName"])
    menuLayout: {
      set(val) {
        this.$store.commit("common/updateMenuLayout", val);
      },
      get() {
        return this.$store.state.common.menuLayout;
      }
    },
    breLayout: {
      set(val) {
        this.$store.commit("common/updateBreadcrumbLayout", val);
      },
      get() {
        return this.$store.state.common.breadcrumbLayout;
      }
    },
    breOpen: {
      set(val) {
        this.$store.commit("common/updateBreadcrumbOpen", val);
      },
      get() {
        return this.$store.state.common.breadcrumbOpen;
      }
    },
    tabOpen: {
      set(val) {
        this.$store.commit("common/updateTabOpen", val);
      },
      get() {
        return this.$store.state.common.tabOpen;
      }
    }
  },
  mounted() {},
  methods: {
    open() {
      this.text = localStorage.getItem("theme_color");
      this.layout = localStorage.getItem("theme_layout");

      this.openBreadcrumb = this.breOpen;
      this.breadcrumbLayout = this.breLayout;
      this.openTabs = this.tabOpen;

      if (!this.layout) {
        this.layout = "sidebar";
      }

      if (!this.text) {
        var cs = document.body.className;
        if (cs) {
          var csarray = cs.split(" ");
          for (var i = 0; i < csarray.length; i++) {
            if (csarray[i] && csarray[i].indexOf("theme") >= 0) {
              this.text = csarray[i];
              break;
            }
          }
        }
      }

      this.box = true;
    },
    setTheme(name) {
      this.isOnClick = true;

      var classNames = this.text + " " + ("tr-" + this.layout);

      document.body.className = classNames;
      localStorage.setItem("theme_color", this.text);
      localStorage.setItem("theme_layout", this.layout);
      localStorage.setItem("openBreadcrumb", this.openBreadcrumb);
      localStorage.setItem("breadcrumbLayout", this.breadcrumbLayout);
      localStorage.setItem("openTabs", this.openTabs);

      this.menuLayout = this.layout;
      this.breLayout = this.breadcrumbLayout;
      this.breOpen = this.openBreadcrumb;
      this.tabOpen = this.openTabs;

      this.isOnClick = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
}
</style>
